<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,  initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <title>小米商城</title>
    <style>
        .xuanfu {
            height: 460px;
            width: 534px;
            margin-left: 233px;
            /*background-color: red;*/
            position: absolute;
            display: none;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
            border: 1px solid #e0e0e0;
        }

        .xuanfu:hover {
            display: block !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
            border: 1px solid #e0e0e0;
        }


    </style>

</head>
<body>
<div style="width: 1226px; margin: 0 auto;">
    <!-- start header -->
    <@common.header/>
    <!--end header -->

    <!-- start banner_x -->
    <@common.banner_x/>
    <!-- end banner_x -->

    <!-- start banner_y -->
    <div class="banner_y center">
        <div id="category_id" style="float:left" class="nav">
            <ul>
        <#list topCategoryList as topCategoryList>
            <li id="llll" class="banner_y_hover">
                <a href="">${topCategoryList.topCategoryName}</a>
                <input type="hidden" value="${topCategoryList.topCategoryId}">
                <span style="float:right; color: #FFF"> &gt;</span>
            </li>
        </#list>

            </ul>
        </div>
        <div style="position: absolute;background-color: red; width: 81%; height: 100%; margin-left: 19%;">
            <div id="demo" class="carousel slide" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li style="cursor: pointer;" data-target="#demo" data-slide-to="0" class="active"></li>

                <#list hotProductVo as hotProductVo>
                 <li style="cursor: pointer;" data-target="#demo" data-slide-to="1"></li>
                </#list>


                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <a href=""> <img style="width: 100%; height: 460px;" src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"></a>
                    </div>
                <#list hotProductVo as hotProductVo>

                <div class="carousel-item">
                    <a href="/hot_product/detail?secondCategoryId=${hotProductVo.secondCategoryId}"> <img
                            style="width: 100%; height: 460px;" src="${hotProductVo.lunboImage}"></a>
                </div>
                </#list>

                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>

            </div>
        </div>


        <div id="123" class="xuanfu">
            <div style="background-color: #FFF; height: 460px;width: 266px;" id="fl_left" class="left fl">
                <div>
                    <div id="leftProduct" class="xuangou_left fl">
                    </div>
                    <div class="clear">
                    </div>

                </div>


            </div>

            <div style="background-color: #FFF; height: 460px;width: 266px;" id="fl_left" class="ctn fl">
                <div>
                    <div id="leftProduct_cetn" class="xuangou_left fl">
                    </div>
                    <div class="clear">
                    </div>

                </div>


            </div>
        </div>

    </div>

    <div class="sub_banner center">
        <div class="sidebar fl">
            <div class="fl"><a href=""><img src="/image/hjh_01.gif"></a></div>
            <div class="fl"><a href=""><img src="/image/hjh_02.gif"></a></div>
            <div class="fl"><a href=""><img src="/image/hjh_03.gif"></a></div>
            <div class="fl"><a href=""><img src="/image/hjh_04.gif"></a></div>
            <div class="fl"><a href=""><img src="/image/hjh_05.gif"></a></div>
            <div class="fl"><a href=""><img src="/image/hjh_06.gif"></a></div>
            <div class="clear"></div>
        </div>
        <div class="datu fl"><a href=""><img src="/image/hongmi4x.png" alt=""></a></div>
        <div class="datu fl"><a href=""><img src="/image/xiaomi5.jpg" alt=""></a></div>
        <div class="datu fr"><a href=""><img src="/image/pinghengche.jpg" alt=""></a></div>
        <div class="clear"></div>


    </div>


    <!-- start danpin -->
    <div class="danpin center">

        <div class="biaoti center">小米明星单品</div>
        <div class="main center">

        <#--<#list startList as startList>-->
        <#--<div class="mingxing fl">-->
        <#--<div class="sub_mingxing"><a href=""><img src="${productList.productImg}" alt=""></a></div>-->
        <#--<div class="pinpai"><a href="">${productList.productName}</a></div>-->
        <#--<div class="youhui">5月9日-21日享花呗12期分期免息</div>-->
        <#--<div class="jiage">${productList.productPrice?c}元</div>-->
        <#--</div>-->

        <#--</#list>-->
            <div class="clear"></div>


        </div>


    </div>
    <div class="biaoti center">家用电器</div>
    <div class="peijian " style="width: 1226px; margin: 0 auto;">

        <div class="main center">
            <div class="content">
                <div class="remen fl"><a href=""><img src="/image/peijian1.jpg"></a>
                </div>
             <#list productVos as productVos>
            <div class="remen fl">
                <div class="xinpin">
                    ${(productVos.isHotProduct==1)?string(' <span style="background-color: red">热门</span>',' <span style="background-color: #FFF">热门</span>')}
                      
                </div>
                <div class="tu"><a href="/product/detail?secondCategoryId=${productVos.secondCategoryId}"><img
                        style="height: 150px;width: 150px;" src="${productVos.productImgs}"></a></div>
                <div class="miaoshu"><a
                        href="/product/detail?secondCategoryId=${productVos.secondCategoryId}">${productVos.secondCategoryName}</a>
                </div>
                <div class="jiage">${productVos.versionPrice?c}元</div>
                <div class="pingjia">372人评价</div>
                <div class="piao">
                    <a href="/product/detail?secondCategoryId=${productVos.secondCategoryId}">
                        <span>${productVos.productDesc}</span>
                    </a>
                </div>
            </div>
             </#list>

                <div class="clear"></div>
            </div>
            <div class="content">
                <div class="remen fl"><a href=""><img src="/image/peijian6.png"></a>
                </div>
                <div class="remen fl">
                    <div class="xinpin"><span"></span></div>
                    <div class="tu"><a href=""><img src="/image/peijian7.jpg"></a></div>
                    <div class="miaoshu"><a href="">小米指环支架</a></div>
                    <div class="jiage">19元</div>
                    <div class="pingjia">372人评价</div>
                    <div class="piao">
                        <a href="">
                            <span>发货速度很快！很配小米6！</span>
                            <span>来至于mi狼牙的评价</span>
                        </a>
                    </div>
                </div>
                <div class="remen fl">
                    <div class="xinpin"><span style="background:#fff"></span></div>
                    <div class="tu"><a href=""><img src="/image/peijian8.jpg"></a></div>
                    <div class="miaoshu"><a href="">米家随身风扇</a></div>
                    <div class="jiage">19.9元</div>
                    <div class="pingjia">372人评价</div>
                </div>
                <div class="remen fl">
                    <div class="xinpin"><span style="background:#fff"></span></div>
                    <div class="tu"><a href=""><img src="/image/peijian9.jpg"></a></div>
                    <div class="miaoshu"><a href="">红米4X 高透软胶保护套</a></div>
                    <div class="jiage">59元</div>
                    <div class="pingjia">775人评价</div>
                </div>
                <div class="remenlast fr">
                    <div class="hongmi"><a href=""><img src="/image/hongmin4.png" alt=""></a></div>
                    <div class="liulangengduo"><a href=""><img src="/image/liulangengduo.png" alt=""></a></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <#--<footer class="mt20 center">-->
        <#--<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>-->
        <#--<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>-->
        <#--<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>-->
    <#--</footer>-->

</div>
<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        $('#category_id ul').on('mouseover', 'li', function (e) {
            var id = $(this).find('input').val();
            $("#123").css('display', 'block');
            $(".carousel-indicators").css('display', 'none');

            $("#leftProduct").empty();
            $("#leftProduct_cetn").empty();
            $.ajax({
                url: '/product/mouseover?topCategory=' + id,
                success: function (result) {
                    console.log(result);
                    $.each(result.data, function (index, item) {
                        $('<a id="a_product" style="width: 250px;cursor: pointer; color: #333!important;"></a>').attr('href', '/product/detail?secondCategoryId=' + item.secondCategoryId)
                                .append($('<img style="float:left!important; cursor: pointer;height: 40px;width: 40px;margin:20px;">').attr('src', item.productImgs))
                                .append($('<span class="fl" style="margin-top:28px;cursor: pointer;"></span>').append(item.secondCategoryName))
                                .append($('<div class="clear"></div>'))
                                .appendTo("#leftProduct");
                    })
                }
            });


            $.ajax({
                url: '/product/getCenter?topCategory=' + id,
                success: function (result) {
                    console.log(result);
                    $.each(result.data, function (index, item) {
                        $('<a id="a_product_cetn" style="width: 250px;cursor: pointer; color: #333!important;"></a>').attr('href', '/product/detail?secondCategoryId=' + item.secondCategoryId)
                                .append($('<img style="float:left!important; cursor: pointer;height: 40px;width: 40px;margin:20px;">').attr('src', item.productImgs))
                                .append($('<span class="fl" style="margin-top:28px;cursor: pointer;"></span>').append(item.secondCategoryName))
                                .append($('<div class="clear"></div>'))
                                .appendTo("#leftProduct_cetn");
                    })
                }
            })
        });

        // 鼠标离开事件
        $('#category_id ul').on('mouseleave', 'li', function (e) {
            $(".carousel-indicators").css('display', 'black');
            $("#123").css('display', 'none');
        });


    });


</script>

</body>
</html>